<template>
	<view>
		<home-section v-for="item in productList" :path="'popularize?id='+item.id" :title="item.name" :showMore="true"
			moreText="去推广" style="margin: 10px auto;width: 710rpx;">
			<view class="section03">
				<view class="title">
					{{item.scene}}
				</view>
				<view class="desc">
					{{ slice(item.introduce)}}
				</view>
			</view>
		</home-section>
	</view>
</template>

<script>
	import {
		noHomeProducts
	} from '@/api/product'

	export default {
		data() {
			return {
				productList: []
			}
		},
		onLoad(option) {
			noHomeProducts().then(res => {
				this.productList = res.data
				console.log(this.productList)
			})
		},
		methods: {
			slice(text) {
				if (text.length > 25) {
					return text.slice(0, 25) + '...'
				}
				return text
			},
			openProduct(id) {
				this.$tab.navigateTo('/pages/home/popularize?id=' + id)
			}
		}
	}
</script>

<style>
	.section03 {
		height: 148rpx;
		border-radius: 8rpx;
		background: url("@/static/images/index/section-right-bottom.png") no-repeat right 10rpx,
			linear-gradient(to bottom, #FEFAF4 0, #FCF6ED 100%);
		background-size: contain;
		padding: 8rpx 12rpx;
		box-sizing: border-box;

		.title {
			color: #9E6D33;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
		}

		.desc {
			/* width: 342rpx; */
			color: rgba(158, 109, 51, 0.60);
			font-weight: 400;
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			margin-top: 8rpx;
		}
	}
</style>